<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="css/main.css">

  <style>
    .table td {
      min-width: 100px;
    }

    .table td:nth-last-child(-n+2) {
      white-space: nowrap;
    }
  </style>
  <script src="js/main.js"></script>
</head>
<body>

<div class="table-container">
  <table class="table fix-head left-head" id="configs">
    <thead>
    <tr>
      <th>index</th>
      <th>value</th>
      <th>default value</th>
      <th>key</th>
      <th>value</th>
      <th>changed time</th>
      <th>callback count</th>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<script>
  ajaxJsonGet("../priorityProperties", function (configs) {
    var html = "";
    for (var idx in configs) {
      var config = configs[idx];
      var dynamicProperties = config.dynamicProperties;

      var rowspan = ">";
      if (dynamicProperties.length != 1) {
        rowspan = " rowspan='" + dynamicProperties.length + "'>";
      }
      html += "<tr>" +
          "<td" + rowspan + idx + "</td>" +
          "<td" + rowspan + config.value + "</td>" +
          "<td" + rowspan + config.defaultValue + "</td>" +
          "<td>" + dynamicProperties[0].key + "</td>" +
          "<td>" + dynamicProperties[0].value + "</td>" +
          "<td>" + dynamicProperties[0].changedTime + "</td>" +
          "<td>" + dynamicProperties[0].callbackCount + "</td>" +
          "</tr>";

      for (var propIdx = 1; propIdx < dynamicProperties.length; propIdx++) {
        html += "<tr>" +
            "<td>" + dynamicProperties[propIdx].key + "</td>" +
            "<td>" + dynamicProperties[propIdx].value + "</td>" +
            "<td>" + dynamicProperties[propIdx].changedTime + "</td>" +
            "<td>" + dynamicProperties[propIdx].callbackCount + "</td>" +
            "</tr>";
      }
    }
    document.querySelector("#configs tbody").innerHTML = html;
  })
</script>
</body>
</html>